<template>
  <div>
    <!--    检索条件-->
    <el-form :inline="true" :model="skuSearchDto" ref="searchRef">
      <el-form-item label="分类" prop="categoryId" >
        <el-cascader v-model="skuSearchDto.categoryId" :options="allCategoryList" @visible-change="getCategoryList"
                     :props="cascaderProps" disabled/>
      </el-form-item>
      <el-form-item label="品牌" prop="brandId">
        <el-select v-model="skuSearchDto.brandId" class="m-2" placeholder="Select"
                   @visible-change="getBrandList" :disabled="skuSearchDto.categoryId.length===0">
          <el-option
              v-for="item in brandList"
              :key="item.id"
              :label="item.brandName"
              :value="item.brandId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-select v-model="skuSearchDto.state" class="m-2" placeholder="Select" disabled>
          <el-option
              label="已上架"
              value="0"
          />
          <el-option
              label="未上架"
              value="1"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="检索" prop="serachValue">
        <el-input v-model="skuSearchDto.searchValue"></el-input>
      </el-form-item>
      <el-form-item label="价格" prop="Price">
        <el-input-number v-model="skuSearchDto.minPrice" @change="handleChange"/>
        -
        <el-input-number v-model="skuSearchDto.maxPrice" @change="handleChange"/>
      </el-form-item>
      <el-form-item>
        <el-button @click="skuSearch">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchRef.resetFields()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <!--  sku列表数据-->
  <div>
    <el-table :data="skuList" style="width: 100%" v-loading="loading">
      <el-table-column type="selection" width="55"/>
      <el-table-column type="expand">
        <template #default="props">
          <div m="4">
            <p m="t-0 b-2">
              <el-text tag="b">标题</el-text>
              : {{ props.row.skuTitle }}
            </p>
            <p m="t-0 b-2">
              <el-text tag="b">副标题</el-text>
              : {{ props.row.skuSubtitle }}
            </p>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="SkuId" width="180"/>
      <el-table-column prop="skuName" label="名称" width="180" show-overflow-tooltip="true"/>
      <el-table-column label="默认图片">
        <template #default="scope">
          <el-image style="width: 100px; height: 100px" :src="$imgBaseUrl+scope.row.skuDefaultImg " :fit="fill"/>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格"/>
      <el-table-column prop="saleCount" label="销量"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-text type="primary">预览</el-text>
          <el-divider direction="vertical"/>
          <el-text type="primary">评论</el-text>
          <el-divider direction="vertical"/>
          <el-dropdown>
            <span>
              <el-text type="primary">更多</el-text>
              <el-icon class="el-icon--right">
                <arrow-down/>
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="openUpAtals(scope.row)">上传图片</el-dropdown-item>
                <el-dropdown-item @click="toWare(scope.row)">库存管理</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!--  分页-->
  <div class="pagination">
    <el-pagination
        hide-on-single-page
        v-model:current-page="skuSearchDto.pageNum"
        v-model:page-size="skuSearchDto.pageSize"
        :page-sizes="[3, 5, 8]"
        :small="small"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="skuSearchDto.totals"
    />
  </div>
  <!--  弹窗-->
  <div>
    <!--    sku上传图片-->
    <el-dialog
        v-model="skuImgUpDialogVisible"
        title="上传sku图片"
        width="60%"
        @close="resetSelect"
    >
      <div>
        <p>当前sku图集：</p>
      </div>
      <div style="display: flex;">
        <el-radio-group v-model="selectSku.skuDefaultImg">
          <div v-for="item in selectSku.skuAtlas"
               :key="item" style="margin-left: 20px">
            <el-card :body-style="{ padding: '0px' }">
              <el-image style="width: 100px; height: 100px" :src="$imgBaseUrl+item.imgId" fit="fill">
                <template #error>
                  <div class="image-slot">
                    <el-icon>
                      <icon-picture/>
                    </el-icon>
                  </div>
                </template>
              </el-image>
              <div class="bottom">
                <el-radio :label="item.imgId">设为默认</el-radio>
              </div>
            </el-card>
          </div>
        </el-radio-group>
      </div>
      <p>上传</p>
      <el-upload
          v-model:file-list="selectSku.skuImgForm"
          name="files"
          :action="$upFile"
          :data="atlas"
          :headers="getHeader"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="getUpImgId"
      >
        <el-icon>
          <Plus/>
        </el-icon>
      </el-upload>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="skuImgUpDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitSkuImg">
          提交
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref, watch,} from "vue";
import {getBrandByCatgoryId} from "@/api/home/brand/brand";
import {getSkuList, modifySku, getSkuAtlas} from '@/api/home/goods/goods'
import {ArrowDown, Plus} from '@element-plus/icons-vue'
import {getAllCategoryToTree} from "@/api/home/goods/category";
import {getToken} from "@/util/token/tokenUtil";
import {useRouter} from 'vue-router'


let searchRef = ref()
const router = useRouter()
const cascaderProps = {
  value: 'id',
  label: 'name',
  children: 'children',
  emitPath: false
}
let loading = ref(true)
let skuSearchDto = reactive({
  categoryId: '',
  brandId: '',
  state: '',
  searchValue: '',
  minPrice: 0,
  maxPrice: 0,
  pageNum: 1,
  pageSize: 5,
  totals: 0
})
let atlas = {
  bucketName: 'goods',
  folderName: 'atlas',
  fileName: '',
  filePath: ''
}
let selectSku = ref({
  id: '',
  spuId: '',
  skuImgs: [],
  skuAtlas: [],//sku存在的图集
  skuImgForm: [],//用于回显
  skuDefaultImg: ''
})
const getHeader = {
  token: getToken('token')
}
let allCategoryList = ref([])
let brandList = ref([])
let skuList = ref([])
let skuImgUpDialogVisible = ref(false)
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

/*获取分类列表*/
function getCategoryList() {
  getAllCategoryToTree().then(res => {
    allCategoryList.value = res.data
  })
}

/*获取品牌列表*/
function getBrandList() {
  getBrandByCatgoryId(skuSearchDto.categoryId).then((res) => {
    brandList.value = res.data
  })
}

async function getSkuListData() {
  let res = await getSkuList(skuSearchDto)
  /*封装分页信息*/
  skuSearchDto.totals = res.data.total - 0
  skuList.value = res.data.records
  loading.value = false
}

async function getImg() {
  let res = await getSkuAtlas(selectSku.value.id)
  selectSku.value.skuAtlas = res.data
}

function getUpImgId(res) {
  selectSku.value.skuImgs.push(res.data)
}

function skuSearch() {
  getSkuListData()
}

function handlePictureCardPreview(uploadFile) {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}

function openUpAtals(sku) {
  selectSku.value.id = sku.id
  selectSku.value.spuId = sku.spuId
  selectSku.value.skuDefaultImg = sku.skuDefaultImg
  getImg()
  skuImgUpDialogVisible.value = true
}

function toWare(sku) {
  /*跳转到库存管理页面*/
  router.push({path: '/home/goods_inventory', query: {skuId: sku.id}})
}

function resetSelect() {
  selectSku.value.id = ''
  selectSku.value.skuImgs = []
  selectSku.value.skuDefaultImg = ''
  selectSku.value.spuId = ''
}

/*提交需改（上传图片）*/
function submitSkuImg() {
  modifySku(selectSku.value).then(() => {
    return skuSearch()
  }).then(() => {
    skuImgUpDialogVisible.value = false
  })

}

onMounted(() => {
  skuSearch()
})
watch([() => skuSearchDto.pageNum, () => skuSearchDto.pageSize], () => {
  //这里使用了skuSearchDto的变化，不能使用watchEffect，否则在填写搜索条件还未点击搜索的时候就会触发
  skuSearch()
})
</script>

<style scoped>

</style>
